<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      show-action
      @search="searchAddr"
      id="tipinput"
    >
      <div slot="action" @click="searchAddr">搜索</div>
    </van-search>
    <div style="position:relative;">
      <div id="map-container"></div>
      <div id="mapShade" :style="{'display':mapShadeShow?'block':'none'}"></div>
    </div>
    <van-cell-group>
      <!-- <van-cell
        title="经度"
        :value="shopInfo.lng"
      />
      <van-cell
        title="纬度"
        :value="shopInfo.lat"
      />-->
    </van-cell-group>
    <div class="operaiton-button">
      <van-button
        style="margin-top:5px; display:inline-block;width:48%;float:left"
        size="large"
        type="primary"
        :loading="isLoading"
        @click="useNowLocation"
      >使用当前地址</van-button>

      <van-button
        size="large"
        style="margin-top:5px;display:inline-block;width:48%;float:right"
        type="warning"
        :loading="isLoading"
        @click="startLocate"
      >手动选取地址</van-button>

      <van-button
        style="margin-top:5px"
        size="large"
        type="danger"
        :loading="isLoading"
        @click="submiteSave"
      >提交</van-button>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import AMap from "AMap";
import { saveShop } from "./../../api/building";
export default {
  data() {
    return {
      shopId: 0,
      shopInfo: {
        id: 0,
        addr: "光谷金融港",
        dutyLetter: null,
        managerMobile: "18627771160",
        managerName: "刘恒",
        name: "飞发走丝",
        alarmNotifier: "",
        lat: "",
        lng: ""
      },
      map: null,
      mousetool: null,
      mapShadeShow: false,
      addrSearchVal: "",
      isLoading: false
    };
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {
        this.initMap();
    this.shopInfo = this.$route.query;

    if (this.shopInfo.lat && this.shopInfo.lng) {
      this.addMarker(this.shopInfo.lng, this.shopInfo.lat);
    }
  },
  activated() {},
  deactivated() {},
  methods: {
    initMap() {
      var _this = this;
      this.map = new AMap.Map("map-container", {
        resizeEnable: true,
        zoom: 19,
        mapStyle: "amap://styles/fresh"
      });

      this.map.plugin(["AMap.MouseTool"], function() {
        //鼠标工具插件
        _this.mousetool = new AMap.MouseTool(_this.map);
      });

      var mapEvent2 = AMap.event.addListener(_this.mousetool, "draw", function(
        e
      ) {
        var drawObj = e.obj;
        var point = drawObj.getPosition();
        _this.shopInfo.lat = point.lat;
        _this.shopInfo.lng = point.lng;
        _this.mapShadeShow = false;
        _this.mapShadeShow = false;
        _this.mousetool.close(false);
      });

      AMap.plugin("AMap.Autocomplete", function() {
        // 实例化Autocomplete
        var autoOptions = {
          // input 为绑定输入提示功能的input的DOM ID
          input: "tipinput"
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
        AMap.event.addListener(autoComplete, "select", function(data) {
          //TODO 选择后的处理程序，data的格式见 附录
          if (data.poi.address.length > 0) {
            _this.addrSearchVal =
              data.poi.district + data.poi.address + data.poi.name;
          } else {
            _this.addrSearchVal = data.poi.district + data.poi.name;
          }
          let location = data.poi.location;
          if (location) {
            _this.addMarker(location.lng, location.lat);
            _this.shopInfo.lat = location.lat;
            _this.shopInfo.lng = location.lng;
          }
        });
      });
    },
    searchAddr() {
      var addr = this.addrSearchVal;
      let _this = this;
      AMap.plugin("AMap.Geocoder", function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        });

        geocoder.getLocation(addr, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // result中对应详细地理坐标信息
            var location = result.geocodes[0].location;
            try {
              if (location) {
                _this.addMarker(location.lng, location.lat);
                _this.shopInfo.lat = location.lat;
                _this.shopInfo.lng = location.lng;
              } else {
                this.$toast.fail("未查询到地理信息!");
              }
            } catch (error) {
              this.$toast.fail("查询地理信息失败,请检查网络!");
            }
          } else {
            this.$toast.fail("未查询到地理信息!");
          }
        });
      });
    },
    addMarker(lng, lat) {
      this.map.clearMap();
      if (lat && lng) {
        var marker = new AMap.Marker({
          position: [lng, lat]
        });
        marker.setMap(this.map);
        this.map.setFitView();
      }
    },
    useNowLocation() {
      const vm = this;
      wx.getLocation({
        type: "gcj02",
        success: function(res) {
          vm.shopInfo.lat = res.latitude;
          vm.shopInfo.lng = res.longitude;
          vm.addMarker(res.longitude, res.latitude);
        },
        cancel: function(res) {
          //this.$toast.success('用户拒绝授权获取地理位置');
        }
      });
    },
    startLocate() {
      this.map.clearMap();
      this.mapShadeShow = true;
      this.mousetool.marker({ offset: new AMap.Pixel(-14, -11) });
    },
    async submiteSave() {
      this.isLoading = true;
      let res = await saveShop(this.shopInfo);
      if (res.code === 0) {
        this.editable = false;
        this.$toast.success("修改成功");
      } else {
        this.$toast.fail(res.msg);
      }
      this.isLoading = false;
    }
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
#map-container {
  width: 100%;
  height: 300px;
}
#mapShade {
  width: 100%;
  height: 300px;
  background-color: #000000;
  position: absolute;
  opacity: 0.35;
  left: 0;
  top: 0;
  z-index: 100;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
}
</style>
